<template>
  <div>
    <table class="tb">
      <p>欢迎光临VUE开发的收银系统_水果店</p>
      <tr class="trr">
        <td class="tdd">苹果10元一斤,折扣8折</td>
      </tr>
      <tr class="trr">
        <td class="tdd">
          请输入你要购买的斤数<input v-model="count" type="text" />
        </td>
      </tr>
      <tr class="trr">
        <td class="tdd"><button @click="btn">结账买单</button></td>
      </tr>
      <tr class="trr">
        <td class="tdd">
          结账单:总价 {{ allpirce }} 元,折后价 {{ zhpirce }} 元,省了
          {{ slpirce }} 元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: "",
      allpirce: "0",
      zhpirce: "0",
      slpirce: "0",
    };
  },
  methods: {
    btn() {
      this.allpirce = this.count * 10;
      this.zhpirce = this.count * 8;
      this.slpirce = this.count * 2;
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
p {
  margin-top: 40px;
}
.tb {
  text-align: center;
  border: 1px solid black;
  margin: 50px auto;
  width: 700px;
  height: 200px;
}
.trr {
  border: 1px solid black;
}
.tdd {
  border: 1px solid black;
}
</style>